<template>
  <section id="form-search">
    <form action="#" class="search">
      <input type="search" name="" id="" placeholder="Search your message" id="searchID">
      <input type="button" value="Search" @click="searchFriend()">
    </form>

  </section>
</template>

<script>
  import Sweetalert from '../assets/js/sweetalert-dev'

  export default{
    mounted(){
    }, data(){
      return {}
    },
    methods: {
      searchFriend(){
        var searchID = document.getElementById('searchID');
        var post = this;
        this.$http.post(global.URL + "/searchFriend", {
          searchID: searchID.value
        }, {emulateJSON: true})
          .then((response) => {
              var data = response.data;
              var aa;
              if (data == "" || data == null) {
                swal("OMG!", "The user does not exist ", "error");
              } else {
                swal({
                  title: "userName :" + data.userName,
                  text: "telephone : " + data.telephone,
                  type: "success",
                  showCancelButton: true,
                  closeOnConfirm: false,
                  confirmButtonText: "OK，Add as a friend",
                  confirmButtonColor: "#ec6c62"
                }, function () {
                  post.$http.jsonp(global.URL + "/addFriend", //跨域请求接口
                    {
                      params: {
                        friendID: data.id
                      }
                    }).then(function (response) {
                    if (response.data == "1") {
                      swal("success", "Successfully added!", "success");
                    } else {
                      swal("OMG", "Please login!", "error");
                      post.$router.replace({path: '/login'})
                    }
                  }, function (error) {
                    swal("OMG", "Fail,Please connect with manager!", "error");
                  });


                });


              }
            },
            (error) => {
              swal("OMG!", "The user does not exist ", "error");
            }
          );
      }
    },
    components: {}
  }

</script>
<style>
  @import '../assets/css/sweetalert.css';

  .demo {
    width: 300px;
    margin: 60px auto 10px auto
  }

  @media only screen and (min-width: 420px) {
    .demo {
      width: 500px;
      margin: 60px auto 10px auto
    }
  }

  button, .button {
    background-color: #AEDEF4;
    color: white;
    border: none;
    box-shadow: none;
    font-size: 17px;
    font-weight: 500;
    font-weight: 600;
    border-radius: 3px;
    padding: 15px 35px;
    margin: 26px 5px 0 5px;
    cursor: pointer;
  }

  button:hover, .button:hover {
    background-color: #a1d9f2;
  }
</style>
